<template>
  <view class="main dispaly-col-center">
    <view class="title-box">
      <view class="title-bg">
        <image src="/static/icon/title-bg.png" mode="aspectFill"/>
        <view class="title-txt">发布</view>
      </view>
    </view>
    <view class="container">
      <view class="form">
        <view class="form-item">
          <view class="name">名称</view>
          <view class="ipt-box">
            <view class="ipt-bg">
              <image src="/static/icon/b-ipt.png" mode="aspectFill"/>
              <input placeholder="请输入名称" v-model="formData.name"/>
            </view>
            <view class="edit">
              <image src="/static/pop/five.png" mode="aspectFill"/>
            </view>
          </view>
        </view>
        <view class="form-block dispaly-just-between">
          <view class="form-item">
            <view class="name">分类</view>
            <view class="ipt-box w-302">
              <view class="ipt-bg w-302">
                <image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill"/>
                <input placeholder="请选择分类" disabled @click="show = true" v-model="formData.categoryName"/>
              </view>
              <view class="edit">
                <up-icon name="arrow-down-fill" color="#ffbf0f" size="16"></up-icon>
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="name">价格(手续费:{{sxPrice.toFixed(2)}}元)</view>
            <view class="ipt-box w-302">
              <view class="ipt-bg w-302">
                <image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill"/>
                <input type="digit" placeholder="请输入价格" v-model="formData.price"/>
              </view>
              <view class="edit">
                <image src="/static/pop/five.png" mode="aspectFill"/>
              </view>
            </view>
          </view>
        </view>
        <view class="form-item">
          <view class="name">图片（最多九张）</view>
          <view>
            <ImageUpload :images="formData.images" :number="9" @upload="data => formData.images = data.join(',')"/>
          </view>
        </view>
        <view class="form-item">
          <view class="name">详情描述</view>
          <view class="desc">
            <textarea class="desc-text" cols="30" rows="10" placeholder="详情描述" v-model="formData.intro"></textarea>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-box">
    <view class="item-box dispaly-just-between">
      <view class="item">
        <view class="b-txt dispaly-align-center" @click="$goUrl('back')">取消</view>
        <image src="/static/icon/xy.png" mode="aspectFill"/>
      </view>
      <view class="item">
        <view class="b-txt dispaly-align-center" style="color: #FFD257 " @click="submit">{{productId ? '修改' : '发布'}}</view>
        <image src="/static/icon/buy.png" mode="aspectFill"/>
      </view>
    </view>
  </view>

  <up-picker @confirm="cateConfirm"  @cancel="show= false" cancelColor="#ee003e" confirmColor="#2d68ea" :show="show" :columns="cateList" keyName="name" closeOnClickOverlay @close="show = false" ></up-picker>

</template>

<script setup>
import {ref, reactive, watch} from 'vue'
import ImageUpload from "../../components/imageUpload/imageUpload.vue";
import {productCate, publish, productDetail, proxy} from '@/api/apiList';
import {onLoad} from '@dcloudio/uni-app'
import {  deleteObjectEmptyKey,debounce } from '@/utils/util'

let formData = reactive({
  images: '',
  name: '',
  price: '',
  intro: '',
  categoryName: '',
  categoryId: '',
  type: 0,
})

const content = ref('')
const sxPrice = ref(0)
const getProxy = async () => {
  const res = await proxy('objFee')
  if(res.code == 200) {
    content.value = res.data.objFee
  }
}

watch(() => formData.price, (newV, oldV) => {
  sxPrice.value = (Number(content.value) / 100 * Number(formData.price))
}, {deep: true})

const show = ref(false)

const cateList = ref([])
const getCateList = async () => {
    const res = await productCate({type: 0})
    if (res.code == 200) {
      cateList.value = [res.data]
      console.log(cateList.value, 'cateList')
    }
}

const cateConfirm = (data) => {
  formData.categoryName = data.value[0].name
  formData.categoryId = data.value[0].id
  show.value = false
}



const msg = async () => {
  await uni.requestSubscribeMessage({
    tmplIds: ['lRAXdz_pHzHq9RRLreThlPSyV20ikgLYNqwMVc27eKY'],
    success: async result => {
      await uni.showLoading({
        title: '发布中'
      })
      const newFormData = deleteObjectEmptyKey(formData)
      const res = await publish(newFormData)
      if(res.code == 200) {
        uni.hideLoading()
        await uni.showToast({
          title: productId.value ? '修改成功,等待审核' : '发布成功,等待审核',
          icon: 'none',
        })
        formData.images = ''
        formData.name = ''
        formData.price = ''
        formData.intro = ''
        formData.categoryName = ''
        formData.categoryId = ''
        formData.type = 0
        // formData ={
        //   images: '',
        //   name: '',
        //   price: '',
        //   intro: '',
        //   categoryName: '',
        //   categoryId: '',
        //   type: 0,
        // }
        if(productId.value) {
          setTimeout(() => {
             uni.reLaunch({
              url: '/subPackage/mine/sell'
            })
          }, 1500)
        }else {
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }

      }else {
        uni.hideLoading()
      }
    },
    fail: err => {
      console.log(err)
    }
  })
}

const submit = async () => {
  if(check()) {
    await msg()
  }
}

// 校验
const check = () => {
  const {name, categoryName, price, images} = formData
  if(!name) {
    uni.showToast({
      title: '请填写名称',
      icon: 'none'
    })
    return false
  }
  if(!categoryName) {
    uni.showToast({
      title: '请选择分类',
      icon: 'none'
    })
    return false
  }
  if(!price) {
    uni.showToast({
      title: '请填写价格',
      icon: 'none'
    })
    return false
  }
   if(Number(price < 1)) {
    uni.showToast({
      title: '价格最低一块钱',
      icon: 'none'
    })
    return false
  }
  if(!images) {
    uni.showToast({
      title: '请上传商品图片',
      icon: 'none'
    })
    return false
  } 
  return true
}

const productId = ref('')
onLoad((option) => {
  productId.value = option.id ? option.id : ''
  if(option.id) {
    getDetail()
  }
  getCateList()
  getProxy()
})

// 获取商品详情
const productDetailData = ref({})
const getDetail = async () => {
  const res = await productDetail(productId.value)
  if (res.code == 200) {
    productDetailData.value = res.data
    const {id, images, name, price, intro, categoryName, categoryId} = productDetailData.value
    formData.id = id
    formData.images = images
    formData.name = name
    formData.price = price
    formData.intro = intro
    formData.categoryName = categoryName
    formData.categoryId = categoryId
  }
}
</script>

<style lang="scss" scoped>
.w-302 {
  width: 302rpx !important;
}
.h-60 {
  height: 60rpx !important;
}
.main {
  margin-top: 30rpx;
  padding-bottom: 184rpx;
  .title-box {
    width: 692rpx;
    height: 78rpx;
    position: relative;

    .title-bg {
      width: 692rpx;
      height: 78rpx;

      image {
        width: 692rpx;
        height: 78rpx;
      }
    }

    .title-txt {
      width: 692rpx;
      height: 78rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 78rpx;
    }
  }

  .container {
    box-sizing: border-box;
    width: 692rpx;
    border-left: 6rpx solid #4e3b0c;
    border-right: 6rpx solid #4e3b0c;
    border-bottom: 6rpx solid #4e3b0c;
    background: #ffd257;
    padding: 23rpx 10rpx 10rpx 10rpx;
    display: flex;
    justify-content: center;

    .form {
      .form-item {
        margin-bottom: 34rpx;
        .desc {
          height: 300rpx;
          width: 626rpx;
          border: 6rpx solid #4e3b0c;
          background: #e6bd4e;
          box-sizing: border-box;
          .desc-text {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            padding: 24rpx;
            color: #fff;
          }
        }
        .name {
          margin-bottom: 19rpx;
          font-size: 28rpx;
        }

        .ipt-box {
          position: relative;
          width: 636rpx;
          height: 60rpx;
          .ipt-bg {
            width: 636rpx;
            height: 60rpx;
            position: relative;
            input {
              position: absolute;
              top: 0;
              left: 0;
              height: 60rpx;
              padding: 0 0 0 20rpx;
              color: #fff;
            }
            image {
              width: 636rpx;
              height: 60rpx;
            }
          }
        }

        .edit {
          position: absolute;
          top: 15rpx;
          right: 15rpx;

          image {
            width: 23rpx;
            height: 23rpx;
          }
        }
      }
    }
  }

  .bottom-line {
    background: #ffd257;

    image {
      width: 692rpx;
      height: 10rpx;
    }
  }
}

.btn-box {
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;

  .item-box {
    padding: 18rpx 26rpx 0 26rpx;

    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;

      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }

      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}
</style>